{__NOLAYOUT__}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>{$xm.title.val}-{$seo_title}</title>
    <include file="Index:meta" />
</head>

<body>
    <div id="page">
        <!-- Header -->
        <include file="Index:header" />
        <!-- Header End -->
        <section class="details-head container pt-40 mb-20">
            <div class="row">
                <div class="col-md-12 clearfix breadcrumb_box mb-20 hide-sm">
                    <ol class="breadcrumb">
                        <li>
                            <a href="/">
                                <i class="icon icon-home"></i> 首页</a>
                        </li>
                        <li>
                            <a href="index.php?m=Index&a=major&pid={$zy.0.id.val}">{$zy.0.title.val}</a>
                        </li>
                        <li>
                            <a href="index.php?m=Index&a=major&pid={$zy.0.id.val}&cid={$gw.0.id.val}">{$gw.0.title.val}</a>
                        </li>
                        <li class="active">{$xm.title.val}</li>
                    </ol>
                </div>
                <div class="col-md-6 details-head-img mb-20">
                    <img src="{$xm.bigimage.val}" onerror="this.src='__PUBLIC__/dist/image/img.jpg'">
                </div>
                <div class="col-md-6 details-head-text mb-20">
                    <h1 class="pt-20 mb-40">
                        <span>项目{$xm.xmid.val}</span>
                        {$xm.title.val}</h1>
                    <div class="con-group">
                        <a class="text-primary">
                            <i class="icon icon-qrcode"></i> 移动教学</a>
                        <div class="popover bottom">
                            <div class="arrow"></div>
                            <div class="popover-content">
                                <div class="qrcode"></div>
                            </div>
                        </div>
                        <p class="con-title">{$xm.description.attr.name|default="项目简介"}：</p>
                        <div>{$xm.description.val}</div>
                    </div>
                    <div class="details-head-btn pt-10">
                        <a  class="btn btn-primary" href="index.php?m=Index&a=major_details&oid={$xm.id.val}" data-remote="index.php?m=Index&a=major_details&oid={$xm.id.val}" data-toggle="modal"
                        data-show-header="false" data-size="lg" data-height="auto">相关信息</a>
                        <!-- <a class="btn btn-success">项目试题</a> -->
                    </div>
                </div>
            </div>
        </section>

        <section class="details-content">
            <div class="container">
                <ul class="details-content-nav clearfix mb-20">
                    <li class="active">
                        <a href="index.php?m=Index&a=details_material&oid={$xm.id.val}" data-container="#material">电子教材</a>
                    </li>
                    <li>
                        <a href="index.php?m=Index&a=details_plan&oid={$xm.id.val}" data-container="#task">任务资源</a>
                    </li>
                    <li>
                        <a href="index.php?m=Index&a=details_download&oid={$xm.id.val}" data-container="#extend">延伸资源</a>
                    </li>
                </ul>
                <div id="material" class="material clearfix details-container"></div>
                <div id="task" class="task clearfix details-container"></div>
                <div id="extend" class="extend clearfix details-container"></div>
            </div>
        </section>

        <include file="Index:footer" />
    </div>

    <!-- 图片显示 -->
    <div class="modal fade" id="lightimg">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="col-md-9 image">
                    <button class="controller prev show">
                        <i class="icon icon-chevron-left"></i>
                    </button>
                    <button class="controller next show">
                        <i class="icon icon-chevron-right"></i>
                    </button>
                    <img id="lightimgSrc" src="">
                </div>
                <div class="col-md-3 content">
                    <h4 id="lightimgTitle" class="mb-20">图片名称</h4>
                    <p id="lightimgTime" class="mb-10">时间：</p>
                    <p id="lightimgContent" class="mb-60"></p>
                    <div class="text-right">
                        <a download class="btn btn-block btn-primary" id="lightimgDown">下载</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <i class="goTop"></i>

    <!-- qrcode -->
    <script src="__PUBLIC__/dist/js/webuploader.min.js"></script>

    <script src="__PUBLIC__/dist/js/jquery.qrcode.min.js"></script>
    <script>
        $(function () {
            $('.qrcode').qrcode(window.location.href);

            var imgbox;
            var index;
            // Tab1 切换active
            $('body').on('click', '.details-content-nav > li:not(.disabled) > a', function (e) {
                var $item = $(this).parent('li');
                $item.parent().children('.active').removeClass('active');
                $item.addClass('active');


                $(".details-container").hide();

                e.preventDefault();
                var container = $(this).data("container");
                var href = $(this).attr("href");

                $(container).show();
                if ($(container).html()) return false;

                $(container).load(href, function () {
                    // 过滤列表
                    $(".filter").on("click", "input", function () {
                        var obj = $(this).parents(".details-container");
                        var index = obj.find(".filter input[type='checkbox']:checked");

                        if (index.length == 0) return filter_init();

                        obj.find(".card-group").hide();
                        index.each(function () {
                            var i = $(this).parent().index();
                            obj.find(".card-group").eq(i).show();
                        })
                    });
                    $(".filter").on("click", "a", filter_init);

                    function filter_init() {
                        $(".card-group").show();
                        $(".filter input").removeAttr("checked");
                    }
                    filter_init();

                    //console.log(container)
                    if (container == "#material") {
                        $('#myScrollspy').on("click", "li", function () {
                            var _i = $(this).index();

                            //注销滚动动画
                            bodyScrollStop();
                            $('body, html').on("scroll", bodyScrollStop);
                            $('body, html').animate({ scrollTop: $('.material-text > section').eq(_i).offset().top + 1 }, 300);
                        });
                        $(window).off("scroll", myScroll);
                        $(window).on("scroll", myScroll);
                    } else if (container == "#extend") {
                        //图片显示
                        imgbox = $(".imgbox");
                        imgbox.on("click", "[data-image]", function () {
                            var that = $(this);
                            index = that.parents(".card-box").index();

                            lightImg(index)
                            $('#lightimg').modal('show');
                        })
                        //删除assets
                        $("[data-delete]").on("click", deleteAssets)
                    }
                });
            });
            $(".details-content-nav a").eq(0).trigger('click');

            $(".details-content").on("click", ".material-btn .task", function () {
                $(".material-side").removeClass("active");
                $(".material .menu").toggleClass("active");
            })
            $(".details-content").on("click", ".material-btn .link", function () {
                $(".material .menu").removeClass("active");
                $(".material-side").toggleClass("active");
            })
            $(".details-content").on("click", ".material-text", function () {
                $(".material .menu").removeClass("active");
                $(".material-side").removeClass("active");
            })

            // 滚动监听
            function myScroll() {
                var oTop = $('.details-content').offset().top;
                // 滚动判断 悬浮tab
                var s = $(window).scrollTop() - 120;
                if (s > oTop) {
                    $("#myScrollspy ul").css({
                        "position": "fixed",
                        "top": "20px"
                    })
                    $(".material-side section").css({
                        "position": "fixed",
                        "top": "20px"
                    })

                    $(".material-btn").addClass("fixed");
                } else {
                    $("#myScrollspy ul,.material-side section").css({
                        "position": "relative",
                        "top": 0,
                        "width": ""
                    })

                    $(".material-btn").removeClass("fixed");
                }
                var scrollObj = $(".material-text > section");
                scrollObj.each(function () {
                    var _target = parseInt($(this).offset().top);
                    var _i = $(this).index();
                    if (_target < $(window).scrollTop()) {
                        $('#myScrollspy li').removeClass("active");
                        $('#myScrollspy li').eq(_i).addClass("active");

                        $(".material-side div").removeClass("show");
                        $('.material-side div').eq(_i).addClass("show");
                    }
                });
            }

            // 滚动监听 A 链接跳转 
            //注销滚动动画
            function bodyScrollStop() {
                $('body, html').stop();
                $('body, html').off("scroll", bodyScrollStop);
            }


            // modal显示 IMG
            function lightImg(num) {
                if (num == 0) {
                    if (imgbox.find("[data-image]").length - 1 == 0) {
                        $("#lightimg .controller").removeClass("show");
                    } else {
                        $("#lightimg .controller.prev").removeClass("show");
                        $("#lightimg .controller.next").addClass("show");
                    }
                } else if (num == imgbox.find("[data-image]").length - 1) {
                    $("#lightimg .controller.prev").addClass("show");
                    $("#lightimg .controller.next").removeClass("show");
                } else {
                    $("#lightimg .controller.prev").addClass("show");
                    $("#lightimg .controller.next").addClass("show");
                }

                var o = imgbox.find(".card-box").eq(num).find("img");
                $("#lightimgSrc").attr("src", o.data("image"));
                $("#lightimgTitle").html(o.data("title"));
                //$("#lightimgTime").html(o.data("time"));
                //$("#lightimgContent").html(o.data("content"));
                //$("#lightimgDown").attr("href", o.attr("src"));
                if(o.data("fileonoff"))
                {
                    $("#lightimgDown").attr("href", o.data("image"));
                    $("#lightimgDown").removeAttr("disabled").removeClass("btn-disabled").removeClass("disabled").addClass("btn-primary");
                }
                else
                {
                    $("#lightimgDown").attr("href", "");
                    $("#lightimgDown").attr("disabled","").addClass("btn-disabled").addClass("disabled").removeClass("btn-primary");
                }
            }
            $("#lightimg").on("click", ".prev", function () {
                index--;
                lightImg(index);
            })
            $("#lightimg").on("click", ".next", function () {
                index++;
                lightImg(index);
            })



            //删除 个人
            function deleteAssets() {
                var $this = $(this);
                var data = $this.data();
                if (!confirm("确定删除" + data.name + " 吗？")) return;
                
                $.post("{:U('home/index/webdelfile')}&type=" + data.type + "&oid={$xm.id.val}", { id: data.delete }, function (req) {
                    req = JSON.parse(req);
                    if (req.status == '1') {
                        $this.parents("li").remove();
                    } else {
                        alert(req.info);
                    }

                })
            }
        })


        // // 获取视频页面
        // function Video(src) {
        //     $('.details-head').hide();
        //     $('.details-media .iframe iframe').remove();
        //     var htm = '<iframe src="' + src + '" scrolling="no" frameborder="0" ></iframe>';
        //     $('.details-media').show();
        //     $('.details-media .iframe').append(htm)
        // }
    </script>
</body>

</html>